var cssText              = '',
forValue             = '';

var cssStuff = new Array();

cssStuff['buttonPadding']= "10px 20px";
cssStuff['backgroundBottom']= "#416B00";
cssStuff['backgroundTop']= "#648632";
cssStuff['borderColor']= "#3F6124";
cssStuff['borderHoverColor']= "#5c0805";
cssStuff['borderRadius']= "8px";
cssStuff['borderWidth']= "1px";
cssStuff['textColor']= "#ffffff";
cssStuff['hoverColor']= "#ffffff";
cssStuff['hoverBackgroundTop']= "#A2110C";
cssStuff['hoverBackgroundBottom']= "#750A00";
cssStuff['fontSize']= "16px";
cssStuff['fontStack']= "Calibri, Arial, Sans-Serif";
cssStuff['fontWeight']= "normal";
cssStuff['textShadow']= "rgba(0, 0, 0, 0.5)";
cssStuff['borderStyle']= "solid";
cssStuff['tingkatBlur']= "2px";
cssStuff['warnaBayang']= "#444444";
cssStuff['boxShadow']= "";
    
function createCSS() {    
cssText= "  .tombol { ";
cssText+= "     border-style: " + cssStuff['borderStyle'] + ";";
cssText+= "     border-color: " + cssStuff['borderColor'] + ";";
cssText+= "     border-width: " + cssStuff['borderWidth'] + ";";
cssText+= "     cursor: pointer;";
    
cssText+= "     background: " + cssStuff['backgroundBottom'] + ";";
cssText+= "     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='" + cssStuff['backgroundTop'] + "', endColorstr='" + cssStuff['backgroundBottom'] + "');";

cssText+= "     background: -webkit-gradient(linear, left top, left bottom, from(" + cssStuff['backgroundTop'] + "), to(" + cssStuff['backgroundBottom'] + "));";
cssText+= "     background: -moz-linear-gradient(top, " + cssStuff['backgroundTop'] + ", " + cssStuff['backgroundBottom'] + ");";
    
cssText+= "     padding: " + cssStuff['buttonPadding'] + ";";
    
cssText+= "     -webkit-border-radius: " + cssStuff['borderRadius'] + ";";
cssText+= "     -moz-border-radius: " + cssStuff['borderRadius'] + ";";
cssText+= "     border-radius: " + cssStuff['borderRadius'] + ";";
    
cssText+= "     -webkit-box-shadow: " + cssStuff['boxShadow'] + "0 1px " + cssStuff['tingkatBlur'] + " " + cssStuff['warnaBayang'] + ";";
cssText+= "     -moz-box-shadow: " + cssStuff['boxShadow'] + "0 1px " + cssStuff['tingkatBlur'] + " " + cssStuff['warnaBayang'] + ";";
cssText+= "     box-shadow: " + cssStuff['boxShadow'] + "0 1px " + cssStuff['tingkatBlur'] + " " + cssStuff['warnaBayang'] + ";";
    
cssText+= "     text-shadow: 0 1px 0 " + cssStuff['textShadow'] + ";";
    
cssText+= "     color: " + cssStuff['textColor'] + ";";
cssText+= "     font: " + cssStuff['fontWeight'] + " " + cssStuff['fontSize'] + " " + cssStuff['fontStack'] + ";";
cssText+= "     text-decoration: none;";
cssText+= "     outline: none;";
cssText+= "     vertical-align: middle;";
    
cssText+= "  }";
    
cssText+= "  .tombol:hover { ";
cssText+= "     border-color: " + cssStuff['borderHoverColor'] + ";";
cssText+= "     background: " + cssStuff['hoverBackgroundTop'] + ";";
cssText+= "     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='" + cssStuff['hoverBackgroundTop'] + "', endColorstr='" + cssStuff['hoverBackgroundBottom'] + "');";
cssText+= "     background: -webkit-gradient(linear, left top, left bottom, from(" + cssStuff['hoverBackgroundTop'] + "), to(" + cssStuff['hoverBackgroundBottom'] + "));";
cssText+= "     background: -moz-linear-gradient(top, " + cssStuff['hoverBackgroundTop'] + ", " + cssStuff['hoverBackgroundBottom'] + ");";
cssText+= "     color: " + cssStuff['hoverColor'] + ";";
cssText+= "  }";
    
cssText+= "  .tombol:active { ";
cssText+= "     background: " + cssStuff['hoverBackgroundBottom'] + ";";
cssText+= "     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='" + cssStuff['hoverBackgroundBottom'] + "', endColorstr='" + cssStuff['hoverBackgroundTop'] + "');";
cssText+= "     background: -webkit-gradient(linear, left top, left bottom, from(" + cssStuff['hoverBackgroundBottom'] + "), to(" + cssStuff['hoverBackgroundTop'] + "));";
cssText+= "     background: -moz-linear-gradient(top, " + cssStuff['hoverBackgroundBottom'] + ", " + cssStuff['hoverBackgroundTop'] + ");";
cssText+= "  }";
            
    $("style").replaceWith("<style type='text/css'>" + cssText + "</style>");
cssText = cssText
        .replace(/;/g,";<br />&nbsp;&nbsp;").replace(/{/g,"{<br />&nbsp;&nbsp;").replace(/}/g,"&nbsp;}<br />");
        
    $("#the-css").html(cssText);
}

function reCenterButton() {
    $(".tombol").position({
    	"my": "center center",
    	"at": "center center",
    	"of": $("#button-box")
    });
};

$(function() {

    $("head").append("<style type='text/css'></style>");

    reCenterButton();
    createCSS();
    
    $('#sizer').slider({
		values: [20],
		min: 4,
		max: 40,
		slide: function(event, ui) {
		    cssStuff['buttonPadding'] = ui.value/2 + "px " + ui.value + "px";
		    reCenterButton();
		    createCSS();
		}
	});
	
	$('#font-sizer').slider({
		values: [16],
		min: 8,
		max: 24,
		slide: function(event, ui) {
		    cssStuff['fontSize'] = ui.value + "px";
		    reCenterButton();
		    createCSS();
		}
	});
	
	$('#border-rounder').slider({
		values: [8],
		min: 0,
		max: 40,
		slide: function(event, ui) {
		    cssStuff['borderRadius'] = ui.value + "px";
		    createCSS();
		}
	});

	$('#penebal-border').slider({
		values: [1],
		min: 0,
		max: 24,
		slide: function(event, ui) {
		    cssStuff['borderWidth'] = ui.value + "px";
		    reCenterButton();
		    createCSS();
		}
	});
	
	$('#bayangan').slider({
		values: [2],
		min: 0,
		max: 20,
		slide: function(event, ui) {
		    cssStuff['tingkatBlur'] = ui.value + "px";
		    reCenterButton();
		    createCSS();
		}
	});

	$('.pickable').ColorPicker({
    	onSubmit: function(hsb, hex, rgb, el) {
    		$(el).val(hex).css("background", "#" + hex);
    		$(el).ColorPickerHide();
    		
    		forValue = $(el).attr("rel");
    		    		
    		cssStuff[forValue] = "#" + hex;
    		createCSS();
    		
    	},
    	onChange: function(hsb, hex, rgb, el) {
    	
    		$($(this).data('colorpicker').el).val(hex).css("background", "#" + hex);
    		
    		forValue = $($(this).data('colorpicker').el).attr("rel");
    		    		
    		cssStuff[forValue] = "#" + hex;
    		createCSS();
    		
    	},
    	onBeforeShow: function () {
    		$(this).ColorPickerSetColor(this.value);
    	}
    });
    
    $("#fontSelector").change(function() {
    
        cssStuff['fontStack'] = $(this).val();
        createCSS();
    
    });

    $("#fontWeight").change(function() {
    
        cssStuff['fontWeight'] = $(this).val();
        createCSS();
    
    });

    $("#borderStyleSelector").change(function() {
    
        cssStuff['borderStyle'] = $(this).val();
        createCSS();
    
    });

    $("#boxShadow").change(function() {
    
        cssStuff['boxShadow'] = $(this).val();
        createCSS();
    
    });

    $("#textShadow").change(function() {
    
        cssStuff['textShadow'] = $(this).val();
        createCSS();
    
    });



    
    $(".tombol").click(function() {
        $("#the-css").dialog({
            "title": "Aku Melihat Kode CSS!",
            "width": 550,
            "height": 450
        });
    });









});